<template>
	<view class="details">
		<view class="ul" v-if="initData != null">
			<view><image :src="shippperOrderVo.image" mode="widthFix" class="img" /></view>
			<view>
				<text class="text">订单号：</text>
				{{ shippperOrderVo.orderSn }}
			</view>
			<!-- TODO -->
			<view>
				<text class="text">订单识别码：</text>
				{{ ordervo.identificationCode  }}
			</view>
			<view>
				<text class="text">商品货号：</text>
				{{ shippperOrderVo.commodityCode }}
			</view>
			<view>
				<text class="text">商品名称：</text>
				{{ shippperOrderVo.goodsName }}
			</view>
			<view>
				<text class="text">供应商信息：</text>
				{{ shippperOrderVo.supplierName }}
			</view>
			<view>
				<text class="text">数量：</text>
				1件
			</view>
			<view>
				<text class="text">客户名称：</text>
				{{ ordervo.contactUser }}
			</view>
			<view>
				<text class="text">联系电话：</text>
				{{ ordervo.contactPhone }}
			</view>
			 <view v-if="shippperOrderVo.orderFrom">
				<text class="text">订单来源：</text>
				{{ shippperOrderVo.orderFrom.desp }}
			</view> 
			<view>
				<text class="text">下单时间：</text>
				{{ shippperOrderVo.createdTime }}
			</view>
			<view>
				<text class="text">审核时间：</text>
				{{ shippperOrderVo.auditTime }}
			</view>
			<view>
				<text class="text">身高：</text>
				{{ ordervo.height }}
			</view>
			<view>
				<text class="text">体重：</text>
				{{ ordervo.weight }}
			</view>
			<view v-for="item in shippperOrderVo.sku" :key="item.value">
				<text class="text">{{ item }}</text>
			</view>
			<view>
				<text class="text">下单人：</text>
				{{ ordervo.placeOrderPerson }}
			</view>
			<view>
				<text class="text">所属代理：</text>
				{{ ordervo.agentname }}
			</view>
			<view>
				<text class="text">收货地址：</text>
				{{ expressVo.province }} {{ expressVo.city }} {{ expressVo.region }}{{ expressVo.addrDetail }}
			</view>
			<view>
				<text class="text">快递单号：</text>
				{{ ordervo.expressSn }}
			</view>
			 <view v-if="shippperOrderVo.productStatusEnum">
				<text class="text">状态：</text>
				{{ shippperOrderVo.productStatusEnum.desp }}
			</view> 

			<view>
				<text class="text">仓库：</text>
				{{ ordervo.depotName }}
			</view>
			<!-- 内部换货 -->
			<view>
				<view v-if="shippperOrderVo.productStatusEnum.value == 5">
					<text class="text">外采：</text>
					{{ ordervo.outPrice }}
				</view>
				<view>
					<text class="text">外采价格：</text>
					{{ shippperOrderVo.purchase }}
				</view>
				<view v-for="(item1, index1) in shippperOrderVo.chagsku" :key="index1" v-if="shippperOrderVo.chagsku.length != 0">
					<text class="text">更换颜色：</text>
					{{ item1 }}
				</view>
			</view>
			<!-- 待货 -->
			<view v-if="shippperOrderVo.productStatusEnum">
			<view v-if="shippperOrderVo.productStatusEnum.value == 2">
				<text class="text">待货天数：</text>
				{{ shippperOrderVo.waitDay }}
			</view>
             </view>
			<view>
				<text class="text">客服名称：</text>
				{{ initData.customerName }}
			</view>
			<view>
				<text class="text">发货员：</text>
				{{ shippperOrderVo.supplierName }}
			</view>
			<view>
				<text class="text" v-if="initData.shipTime == ''">发货时间：</text>
				{{ shippperOrderVo.shipTime }}
			</view>
			<view>
				<text class="text">操作时间：</text>
				{{ shippperOrderVo.operationTime }}
			</view>
			<view>
				<text class="text">备注：</text>
				{{ ordervo.remark }}
			</view>
			<view>
				<text class="text">客服备注：</text>
				{{ ordervo.customerRemark }}
			</view>
		</view>
		<view class="go-top" v-show="is_go_top" @click="backTop"><image src="/static/img/go_top.png" /></view>
	</view>
</template>

<script>
import { uniIcons } from '@dcloudio/uni-ui';
import shipments from '../../servers/shipments/shipments.js';
import dateFormat from '../../common/dateFormat.js';
export default {
	components: { uniIcons },
	data() {
		return {
			initData: '',
			shippperOrderVo: '',
			ordervo: '',
			expressVo: '',
			id: '',
			array: ['中国', '美国', '巴西', '日本'],
			index: 0,
			is_go_top: false
		};
	},
	onPageScroll: function(e) {
		//nvue暂不支持滚动监听，可用bindingx代替
		if (e.scrollTop > 200) {
			this.is_go_top = true;
		} else {
			this.is_go_top = false;
		}
	},
	mounted() {
		/* TODO登录后角色判定进行手机号的隐藏 */
		var _this = this
		uni.getStorage({
		    key: 'shipmentsgoodsdetails',
		    success: function (res) {
		        _this.id = res.data;
		    }
		});
		var obj = { orderId: this.id };
		shipments
			.newDetails(obj)
			.then(res => {
				this.initData = res.data;
				this.shippperOrderVo = res.data.shippperOrderVo;
				this.ordervo = res.data.ordervo;
				this.expressVo = res.data.expressVo;
				this.shippperOrderVo.image = this.imgCDNUrl + this.shippperOrderVo.image;
				var sku = [];
				if (this.shippperOrderVo.productSkuDesp) {
					sku = this.shippperOrderVo.productSkuDesp.split(',');
				}
				var chagsku = [];
				if (this.shippperOrderVo.changProductSkuDesp) {
					chagsku = this.shippperOrderVo.changProductSkuDesp.split(',');
				}
				this.shippperOrderVo.sku = sku;
				this.shippperOrderVo.chagsku = chagsku;
			})
			.catch(err => {
				console.log(new Error('请检查网络后重试'));
			});
	},
	methods: {
		// 计算距离顶部的高度，均分10等分，
		backTop() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 200
			});
		}
	}
};
</script>
<style lang="less" scoped>
page {
	background: #ffffff;
}
.details {
	.img {
		width: 100%;
		border: 1px solid #efeff4;
	}
	.ul {
		line-height: 72rpx;
		font-size: 24rpx;
		color: #999999;
		padding: 20rpx;
		.text {
			display: inline-block;
			width: 180rpx;
			text-align-last: justify;
			color: #333;
		}
	}
}
.msg {
	padding: 20rpx;
	border-top: 26rpx solid #f6f6f6;
	.li {
		position: relative;
		display: flex;
		flex-direction: row;
		line-height: 120rpx;
		font-size: 26rpx;
		text {
			font-size: 28rpx;
			width: 180rpx;
			text-align-last: justify;
		}
		.remark {
			display: inline-block;
			width: 520rpx;
			word-wrap: break-word;
			line-height: 50rpx;
		}
	}
	.button {
		margin-top: 50rpx;
		display: flex;
		flex-direction: row;
		view {
			width: 208rpx;
			line-height: 74rpx;
			border-radius: 37rpx;
			text-align: center;
			font-size: 28rpx;
			margin-right: 45rpx;
		}
		.accept {
			color: #fff;
			background: linear-gradient(80deg, #d2158a, #fc6395);
		}
		.reject {
			color: #bd3c8c;
			border: 1px solid #bd3c8c;
		}
		.rejects {
			margin-right: 0;
			color: #666666;
			border: 1px solid #e1e1e1;
		}
	}
}
</style>
